<template>
  <view class="content">
    <view class="warehousing_list">
      <!-- 1 -->
      <view class="warehousing_item" v-if="ordermsg1.user_card_id">
        <view class="warehousing_itemtop"> 会员卡 </view>
        <view class="warehousing_itemcontent">
          <view class="warehousing_content">
            <text>标题:</text>{{ userCardInfo.titile }}<text></text>
          </view>
          <view class="warehousing_content">
            <text>手机号:</text><text>{{ userCardInfo.mobile }}</text>
          </view>
        </view>
      </view>
      <!-- 2 -->
      <view class="warehousing_item">
        <view class="warehousing_itemtop"> 订单信息 </view>
        <view class="warehousing_itemcontent">
          <view class="warehousing_content">
            <text>订单类型:</text><text>{{ ordermsg1.type_text }}</text>
          </view>

          <view class="warehousing_content">
            <text>是否支付:</text><text>{{ ordermsg1.type_text }}</text>
          </view>
          <view class="warehousing_content">
            <text>支付方式:</text><text>{{ ordermsg1.pay_type_text }}</text>
          </view>
          <view class="warehousing_content">
            <text>收款金额:</text><text>{{ ordermsg1.money }}</text>
          </view>
          <view class="warehousing_content">
            <text>原价金额:</text><text>{{ ordermsg1.order_money }}</text>
          </view>
          <view class="warehousing_content">
            <text>手动优惠</text><text>{{ ordermsg1.is_discount_text }}</text>
          </view>
          <view class="warehousing_content">
            <text>特价:</text><text>{{ ordermsg1.tejia_text }}</text>
          </view>
          <view class="warehousing_content">
            <text>订单创建时间:</text
            ><text>{{ ordermsg1.createtime_text }}</text>
          </view>
          <!-- 判断finish_time 不为0和type1 出售  type2租赁 -->

          <view class="warehousing_content">
            <text>还清时间:</text>
            <text v-if="ordermsg1.finish_time != 0 && ordermsg1.type == 1">{{
              ordermsg1.finish_time_text
            }}</text>
            <text v-else>未归还</text>
          </view>
          <view class="warehousing_content">
            <text>支付时间:</text>
            <text v-if="ordermsg1.finish_time != 0 && ordermsg1.type == 2">{{
              ordermsg1.finish_time_text
            }}</text>
            <text v-else>未支付</text>
          </view>
        </view>
      </view>
      <!-- 3 -->
      <view class="warehousing_item">
        <view class="warehousing_itemtop" style="margin-bottom: 20rpx">
          订单信息
        </view>
        <view
          class="warehousing_itemcontent goodslist"
          v-for="(item, index) in ordermsg2"
          :key="index"
        >
          <!-- 列表 -->
          <view>
            <view style="margin-bottom: 20rpx"> {{ item.goods.title }}</view>
            <view>{{ item.goods_sku_value.value }}</view>
          </view>
          <view>
            <!-- 会员价 -->
            <!-- 收款价等于会员价时 大 -->
            <view :class="[viptext == `会员价` ? 'font' : '']">
              <text>会员价:</text>
              ¥{{ item.goods.vip_price }}
            </view>
            <view :class="[viptext == `非会员价` ? 'font' : '']">
              <!-- 售价 -->

              <text>售价:</text>
              ¥{{ item.goods.price }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单详情列表
      orderdetaillist: [],
      //   点击订单的id
      id: "",
      //   会员卡对象
      userCardInfo: {},
      //   订单信息1
      ordermsg1: {},
      //   取订单信息2的数组
      ordermsg2: [],
      viptext: "",
    };
  },
  onLoad(option) {
    // console.log(option.id);
    this.id = option.id;
  },
  methods: {
    // 根据id获取订单详情
    getOrderDetailList() {
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.order/orderdetail", //仅为示例，并非真实接口地址。
        data: {
          id: this.id,
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 1) {
            console.log(res.data.data);
            // 取会员卡
            this.userCardInfo = res.data.data.userCardInfo;
            // 取订单信息1
            this.ordermsg1 = res.data.data;
            this.viptext = this.ordermsg1.is_vip_text;
            console.log(this.viptext);
            this.ordermsg2 = res.data.data.order_detail;
          }

          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },
  },
  mounted() {
    this.getOrderDetailList();
  },
};
</script>

<style>
page {
  background: #f6f6f6;
}
.warehousing_list {
  width: 90%;
  margin: 0 5%;
}
.warehousing_item {
  background: #fff;
  margin: 20rpx 0;
  border-radius: 10rpx;
  box-shadow: 2rpx 2rpx 10rpx #eee;
  padding: 20rpx;
  /* padding-bottom: 0; */
}
.warehousing_itemtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.warehousing_itemcontent {
}
.warehousing_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333;
}
.warehousing_content text:nth-child(1) {
  width: 200rpx;
}
.warehousing_content image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}
.warehousing_edit {
  display: flex;
  align-items: center;
}
.warehousing_edit text:nth-child(1) {
  margin-right: 2%;
  width: 400rpx;
  display: inline-block;
  text-align: right;
}
.warehousing_edit text:nth-child(2) {
  display: inline-block;
}
.goodslist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  margin-bottom: 10rpx;
  padding: 20rpx 0;
}
/* 动态class */
.font {
  color: red;
  font-weight: 600;
}
</style>
